<template>
	<view class="home-navbar" id="home-navbar" :style="{backgroundColor: props.bgColor}">
		<view :style="{height: menuButtonInfo.top - ((46 - menuButtonInfo.height) / 2) + 'px'}"></view>
		<view class="home-navbar-box" @click.stop="patientSelect = true">
			<com-image :src="hospitalInfo ? hospitalInfo.logoImg : ''" mode="" :width="40" :height="40" />
			<view class="home-navbar-title" :style="{width: titleWidth}">{{ hospitalInfo ? hospitalInfo.name : "" }}</view>
		</view>
	</view>
</template>

<script lang="ts" setup>

	import {
		ref,
		computed,
		onMounted,
		getCurrentInstance
	} from "vue";

	const { proxy } : any = getCurrentInstance();

	const emits = defineEmits(["height"]);

	const props = defineProps({
		bgColor: {
			type: String
		}
	});

	const menuButtonInfo = uni.getMenuButtonBoundingClientRect();

	const hospitalInfo = ref(uni.getStorageSync("system-hospital") || null);

	const patientSelect = ref(false);

	const titleWidth = computed(() => {
		return menuButtonInfo.left - 50 + "px";
	});

	function getHospitalNameFn(){
		if(!hospitalInfo.value){
			setTimeout(() => {
				hospitalInfo.value = uni.getStorageSync("system-hospital");
				getHospitalNameFn();
			}, 2000);
		}else{
			// #ifdef MP-WEIXIN
			proxy.createSelectorQuery().select("#home-navbar").boundingClientRect((res: any)=>{
				emits("height", res.height);
			}).exec();
			// #endif
		}
	}

	onMounted(() => {
		getHospitalNameFn();
	});

</script>

<style lang="scss" scoped>
	.home-navbar{
		position: sticky;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 1999;
		background-color: rgba(236, 246, 255, 1);
		.home-navbar-box{
			width: 100%;
			height: 46px;
			@include flex-start-center;
			padding-left: var(--gy-gap);
			.home-navbar-title{
				font-size: 32rpx;
				line-height: 32rpx;
				padding-right: 10rpx;
				font-weight: bold;
				@include text-ellipsis(1);
				margin-left: 10rpx;
			}
		}
	}
</style>
